<template>
  <div class='attendance'>
     <!-- 表头 -->
     <div class="header">
      <el-button
        type="primary"
        icon="el-icon-circle-plus-outline"
        round
        @click="addAttendanceDialog = true"
        >新增考勤规则</el-button
      >
    </div>
    <div class="table">
      <el-table :data="tableData" height="550" border style="width: 100%" header-align="center" >
        <el-table-column prop="id" label="id" width="40" align="center"> </el-table-column>
        <el-table-column prop="name" label="考勤组名称" align="center"> </el-table-column>
        <el-table-column prop="town_name" label="所属区域" align="center"> </el-table-column>
        <el-table-column  label="上班时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.startWork }}
          </template>
        </el-table-column>
        <el-table-column label="下班时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.endWork }}
          </template>
         </el-table-column>
        <el-table-column prop="intervalTime" label="打卡间隔时长/分" align="center"> </el-table-column>
        <el-table-column label="周一" width="50" align="center"> 
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.Monday"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="周二"  width="50" align="center"> 
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.Tuesday"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="周三" width="50" align="center"> 
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.Wednesday"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="周四" width="50" align="center"> 
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.Thursday"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="周五" width="50" align="center"> 
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.Friday"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="周六" width="50" align="center"> 
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.Saturday"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="周日" width="50" align="center"> 
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.Sunday"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="update(scope.row)"
              >编辑</el-button
            >
            <el-button type="text" size="small" @click="delAttendance(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 新增dialog -->
    <el-dialog title="新增考勤规则" :visible.sync="addAttendanceDialog">
      <el-form label-position="left"  label-width="80" :model="addAttendanceForm"  >
        <el-form-item label="考勤规则名称">
          <el-input v-model="addAttendanceForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所属区域">
          <el-select v-model="addAttendanceForm.town_id" placeholder="请选择所属区域">
            <el-option v-for="item in townData" :key="item.id" :label="item.town_name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上班时间">
          <el-time-picker
            v-model="addAttendanceForm.startTime"
            :picker-options="{
              selectableRange: '00:00:00 - 23:59:59'
            }"
            placeholder="任意时间点">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="下班时间">
          <el-time-picker
            v-model="addAttendanceForm.endTime"
            :picker-options="{
              selectableRange: '00:00:00 - 23:59:59'
            }"
            placeholder="任意时间点">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="打卡间隔时长/分">
          <el-input v-model="addAttendanceForm.intervalTime" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="考勤时间段">
           <el-checkbox label="周一" v-model="addAttendanceForm.Monday" name="type"></el-checkbox>
           <el-checkbox label="周二" v-model="addAttendanceForm.Tuesday" name="type"></el-checkbox>
           <el-checkbox label="周三" v-model="addAttendanceForm.Wednesday" name="type"></el-checkbox>
           <el-checkbox label="周四" v-model="addAttendanceForm.Thursday" name="type"></el-checkbox>
           <el-checkbox label="周五" v-model="addAttendanceForm.Friday" name="type"></el-checkbox>
           <el-checkbox label="周六" v-model="addAttendanceForm.Saturday" name="type"></el-checkbox>
           <el-checkbox label="周日" v-model="addAttendanceForm.Sunday" name="type"></el-checkbox>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="reset('add')">取 消</el-button>
        <el-button type="primary" @click="addAttendance"
          >确 定</el-button
        >
      </div>
    </el-dialog>
     <!-- 修改dialog -->
     <el-dialog title="修改考勤规则" :visible.sync="updateAttendanceDialog">
      <el-form label-position="left"  label-width="80" :model="updateAttendanceFrom"  >
        <el-form-item label="考勤规则名称">
          <el-input v-model="updateAttendanceFrom.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所属区域">
          <el-select v-model="updateAttendanceFrom.town_id" placeholder="请选择所属区域">
            <el-option v-for="item in townData" :key="item.id" :label="item.town_name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上班时间">
          <el-time-picker
            v-model="updateAttendanceFrom.startWork"
            :picker-options="{
              selectableRange: '00:00:00 - 23:59:59'
            }"
            placeholder="任意时间点">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="下班时间">
          <el-time-picker
           v-model="updateAttendanceFrom.endWork"
            :picker-options="{
              selectableRange: '00:00:00 - 23:59:59'
            }"
            placeholder="任意时间点">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="打卡间隔时长/分">
          <el-input v-model="updateAttendanceFrom.intervalTime" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="考勤时间段">
           <el-checkbox label="周一" v-model="updateAttendanceFrom.Monday" name="type"></el-checkbox>
           <el-checkbox label="周二" v-model="updateAttendanceFrom.Tuesday" name="type"></el-checkbox>
           <el-checkbox label="周三" v-model="updateAttendanceFrom.Wednesday" name="type"></el-checkbox>
           <el-checkbox label="周四" v-model="updateAttendanceFrom.Thursday" name="type"></el-checkbox>
           <el-checkbox label="周五" v-model="updateAttendanceFrom.Friday" name="type"></el-checkbox>
           <el-checkbox label="周六" v-model="updateAttendanceFrom.Saturday" name="type"></el-checkbox>
           <el-checkbox label="周日" v-model="updateAttendanceFrom.Sunday" name="type"></el-checkbox>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="reset('update')">取 消</el-button>
        <el-button type="primary" @click="updateAttendance"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getAttendance,addAttendance,updateAttendance,deleteAttendance } from '@/api/attendance/index'
import { getTown } from '@/api/town'
import { timeFormt } from '@/utils/utils'
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'attendance',
  data() {
    return {
      tableData:[],
      attendance:[],
      addAttendanceDialog:false,
      updateAttendanceDialog:false,
      addAttendanceForm:{
        name:'',
        town_id:'',
        startTime:'',
        endTime:'',
        intervalTime:'',
        Monday:false,
        Tuesday:false,
        Wednesday:false,
        Thursday:false,
        Friday:false,
        Saturday:false,
        Sunday:false
      },
      updateAttendanceFrom:{
        name:'',
        town_id:'',
        startTime:'',
        endTime:'',
        intervalTime:'',
        startWork:'',
        endWork:'',
        Monday:false,
        Tuesday:false,
        Wednesday:false,
        Thursday:false,
        Friday:false,
        Saturday:false,
        Sunday:false
      },
      townData:[]
    }
  },
  components: {},
 props: {},
  computed: {},
  watch: {
    'updateAttendanceFrom.startWork':{
      handler(newVal){
        const date = new Date(newVal)
        const str = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`
        newVal.startWork = str
      },
      deep:true
    },
    'updateAttendanceFrom.endWork':{
      handler(newVal){
        const date = new Date(newVal)
        const str = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`
        newVal.endWork = str
      },
      deep:true
    },
  },
  beforeCreate() {
    
  },
  created() {
    this.init()
    this.getTown()
  },
  methods: {
    async init(){
      await this.getAttendance()
    },
    async getAttendance(){
      await getAttendance().then(res=>{
        if(res.status === 0){
          this.attendance = res.data
          console.log(this.attendance);
        }
      })
      this.tableData = []
      // 将上班时间做成数组显示在表格中
      this.attendance.forEach(item=>{
        const arr = this.stringToArr(item)
        item.Monday = false
        item.Tuesday = false
        item.Wednesday = false
        item.Thursday = false
        item.Friday = false
        item.Saturday = false
        item.Sunday = false
        arr.forEach(card=>{
          if(card === '1'){
            item.Monday = true
          }
          if(card === '2'){
            item.Tuesday = true
          }
          if(card === '3'){
            item.Wednesday = true
          }
          if(card === '4'){
            item.Thursday = true
          }
          if(card === '5'){
            item.Friday = true
          }
          if(card === '6'){
            item.Saturday = true
          }
          if(card === '7'){
            item.Sunday = true
          }
        })
        this.tableData.push(item)
      })
     
    },
    // 将attendacneTime的数据转换成数组
    stringToArr(item){
      const arr = item.attendanceTime.split(',')
      return arr
    },
    // 获取所有乡镇信息
    getTown(){
      getTown().then(res=>{
        if(res.status === 0){
          this.townData = res.data
        }
      })
    },
    // dialog的取消按钮
    reset(item){
      if(item === 'add'){
        this.addAttendanceDialog = false
        this.addAttendanceForm={
        name:'',
        town_id:'',
        startTime:'',
        endTime:'',
        intervalTime:'',
        Monday:false,
        Tuesday:false,
        Wednesday:false,
        Thursday:false,
        Friday:false,
        Saturday:false,
        Sunday:false
      }
      }
      if(item === 'update'){
        this.updateAttendanceDialog = false
        this.updateAttendanceFrom={
        name:'',
        town_id:'',
        startTime:'',
        endTime:'',
        intervalTime:'',
        Monday:false,
        Tuesday:false,
        Wednesday:false,
        Thursday:false,
        Friday:false,
        Saturday:false,
        Sunday:false
      }
      }
    },
    addAttendance(){
      this.addAttendanceForm.attendanceTime = this.objtostr(this.addAttendanceForm)
      this.addAttendanceForm.startWork = timeFormt(this.addAttendanceForm.startTime)
      this.addAttendanceForm.endWork = timeFormt(this.addAttendanceForm.endTime)
      addAttendance(this.addAttendanceForm).then(res=>{
        if(res.status === 0){
          this.$message.success(res.message)
          this.init()
          this.addAttendanceDialog = false
          this.addAttendanceForm = {
            name:'',
            town_id:'',
            startTime:'',
            endTime:'',
            intervalTime:'',
            Monday:false,
            Tuesday:false,
            Wednesday:false,
            Thursday:false,
            Friday:false,
            Saturday:false,
            Sunday:false
          }
        }
      })
    },
    // 属性名转字符串
    objtostr(item){
      let str = ''
      if(item.Monday){
        str += '1,'
      }
      if(item.Tuesday){
        str += '2,'
      }
      if(item.Wednesday){
        str += '3,'
      }
      if(item.Thursday){
        str += '4,'
      }
      if(item.Friday){
        str += '5,'
      }
      if(item.Saturday){
        str += '6,'
      }
      if(item.Sunday){
        str += '7,'
      }
      return str
    },
    update(item){
      this.updateAttendanceFrom = {...item}
      this.updateAttendanceDialog = true
      this.updateAttendanceFrom.startWork =new Date('01 01,2022 '+this.updateAttendanceFrom.startWork)
      this.updateAttendanceFrom.endWork = new Date('01 01,2022 '+this.updateAttendanceFrom.endWork)
    },
    // 时间转换成时间戳
    FormatTime(time){
      let times = time.split(':')
      let date = new Date('1999','05','21',times[0],times[1],times[2])
      return date;
    },
    updateAttendance(){
      console.log(this.updateAttendanceFrom);
      updateAttendance(this.updateAttendanceFrom).then(res=>{
        if(res.status === 0){
          this.$message.success(res.message)
          this.updateAttendanceDialog = false
          this.init()
          this.updateAttendanceFrom = {
            name:'',
            town_id:'',
            startTime:'',
            endTime:'',
            intervalTime:'',
            Monday:false,
            Tuesday:false,
            Wednesday:false,
            Thursday:false,
            Friday:false,
            Saturday:false,
            Sunday:false
          }
        }
      })
    },
    delAttendance(item){
      deleteAttendance(item).then(res=>{
        if(res.status === 0){
          this.$message.success(res.message)
          this.updateAttendanceDialog = false
          this.init()
        }
      })
    }
  },
}
</script>
<style lang='less' scoped>
.header {
  text-align: left;
  margin-bottom: 10px;
}
::v-deep .el-dialog {
  margin: 0 auto 5vh !important;
}
::v-deep .el-input{
  width: 70% !important;
}
</style>